<template>
	<div style="width: 100%; height: 100%; position: relative;">
		<div class="container">
			<el-table :data="tableData" stripe style="width: 100%">
				<el-table-column prop="_id" label="id" width="240">

				</el-table-column>
				<el-table-column class="heights" prop="name" label="name" width="180">
				</el-table-column>
				<el-table-column prop="swiper_url" label="图片地址">
					<template slot-scope="scope">
						<div style="height: 200px;width: 300px;">
							<el-carousel :autoplay="false" height="200px" indicator-position="outside">
								<el-carousel-item v-for="item in scope.row.swiper_url">
									<img :src="item" style="width: 300px;" alt="" srcset="" />
								</el-carousel-item>
							</el-carousel>
						</div>

					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="mask" v-if="show">
				<div class="mask-box">
					<el-card class="box-card" shadow="never">
						<div slot="header" class="clearfix">
							<span>封面轮播图(推荐9:16)</span>
						</div>
						<div>
							<ul class="ny-upload-ul">
								<li v-for="itam in swiper_url">
									<div>
										<img :src="itam" alt="" />
										<span class="ny-upload-span">
											<span @click="handlePictureCardPreview(itam)"
												class="ny-upload-span-itam1"><i class="el-icon-zoom-in"></i></span>
											<span @click="deleteFiles(itam)" class="ny-upload-span-itam2"><i
													class="el-icon-delete"></i></span>
										</span>
									</div>
								</li>
							</ul>
							<div class="ny-upload-img" @click="uploaD">
								<i data-v-293d3606 class="el-icon-plus"></i>
							</div>
							<el-dialog style="z-index: 55;" :visible.sync="dialogVisible">
								<img width="100%" :src="dialogImageUrl" alt="">
							</el-dialog>
						</div>
					</el-card>
					<div class="btn-box">
						<el-button @click="primarys" type="primary">确认</el-button>
						<el-button @click="show=false">取消</el-button>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				swiper_url: [],
				dialogVisible: false,
				dialogImageUrl: '',
				list_num: [],
				show: false,
				_ie: ''
			}
		},
		mounted() {
			let col = uniCloud.importObject('indexObj', {
				customUI: true
			})
			col.getnySwiper().then((res) => {
				console.log(res.data)
				this.tableData = res.data
			})
		},
		methods: {
			primarys() {
				let col = uniCloud.importObject('indexObj', {
					customUI: true
				})
				col.updatenySwiper(this._id,{swiper_url:this.swiper_url}).then((res)=>{
					console.log(res)
					this.show=false
				})
			},
			handleEdit(e) {
				console.log(e)
				this.show = true
				this.swiper_url = e.swiper_url
				this._id = e._id

			},
			uploaD(item) {
				let that = this
				if (this.list_num.length <= 4) {
					uni.chooseImage({
						count: 4,
						sizeType: ['compressed'],
						crop: {
							width: "500px"
						},
						success(res) {
							console.log(res.tempFilePaths);
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								uni.showLoading({
									title: '上传中...'
								})
								let filePath = res.tempFilePaths[i] // 选择图片的临时路径
								let name = res.tempFiles[i].name // 选择图片的名称.后缀名
								let aaa = name.replace('.jpg', '').replace('.JPG', '').replace('.png', '')
								let asd = aaa.split('-')[2] - 0
								// 生成随机名字
								let result = '';
								const characters =
									'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
								for (let i = 0; i < 8; i++) {
									result += characters.charAt(Math.floor(Math.random() * characters.length));
								}
								var handleImage = function(imgSrc) {
									// 创建一个Image对象
									var img = new Image();
									img.src = imgSrc;
									// 定义图片加载完成时的处理函数
									var onLoadHandler = function() {
										// 移除事件监听器，确保只执行一次
										img.removeEventListener('load', onLoadHandler);
										// 创建一个Canvas元素
										var canvas = document.createElement('canvas');
										var ctx = canvas.getContext('2d');
										// 设置Canvas的尺寸
										var maxWidth = 800; // 设置最大宽度
										var maxHeight = 1500; // 设置最大高度
										var imgWidth = img.width;
										var imgHeight = img.height;
										if (imgWidth > maxWidth || imgHeight > maxHeight) {
											var ratio = Math.min(maxWidth / imgWidth, maxHeight /
												imgHeight);
											imgWidth *= ratio;
											imgHeight *= ratio;
										}
										canvas.width = imgWidth;
										canvas.height = imgHeight;
										// 在Canvas上绘制图片
										ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
										// 将Canvas中的图片转换为DataURL
										var compressedDataURL = canvas.toDataURL('image/jpeg',
											0.8); // 压缩质量为0.8
										// 输出压缩后的DataURL
										console.log('压缩后的图片DataURL：', compressedDataURL);

										// 调用上传的接口
										that.uploadFileImg(compressedDataURL, result)
									}
									// 监听图片加载完成事件
									img.addEventListener('load', onLoadHandler);
								}
								handleImage(filePath);
							}
						}

					});
				}
			},
			uploadFileImg(filePath, result) {
				let that = this
				uniCloud.uploadFile({
					filePath: filePath, //要上传的文件对象
					cloudPath: `ningyuApp/image/uploader/${result}.png`,
					cloudPathAsRealPath: true,
					success(res) {
						let imageUrl = res.fileID //云端返回的图片地址
						uniCloud.callFunction({ //调用云端函数，把图片地址写入表
							name: 'addImage', //云函数名称
							data: { //提交给云端的数据
								imageUrl: imageUrl,
								createTime: result,
							},
							success: (res) => {
								//console.log('数据插入成功')
								console.log(res)

								that.swiper_url.push(
									`https://mp-ab4407e3-0701-45ce-b458-b02edc2d6474.cdn.bspapp.com/ningyuApp/image/uploader/${result}.png`
								)
								uni.showToast({
									title: '壁纸添加成功！！',
									duration: 1000
								});

							},
							fail: (err) => {
								console.log(err)
								uni.showToast({
									title: '添加失败，类型已存在',
									duration: 1000
								});
							},
							complete: () => {

							}
						})
					},
					fail(err) {
						console.log(err)
					},
					complete() {
						uni.hideLoading()
					}
				});
			},
			deleteFiles(res) {
				this.swiper_url = this.swiper_url.filter(m => m != res)
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file;
				this.dialogVisible = true;
			},
		}
	}
</script>

<style lang="scss">
	v-model {
		display: none;
	}

	.container {
		margin: 0;
		padding: 0;
		background-color: #fff;
		width: 100%;
		height: 97%;
		overflow-y: auto;
		overflow-x: hidden;

	}

	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 55;
		display: flex;
		justify-content: center;
		align-items: center;

		.mask-box {
			width: 70%;
			height: 80%;
			background-color: #fff;
			position: relative;

			.box-card {
				width: 95%;
				margin: 0 auto;
				margin-top: 10px;
				margin-bottom: 20px;

				.ny-card-itam {
					position: relative;
					width: 208px;
					height: 74px;

					image {
						position: absolute;
						width: 100%;
						height: 100%;
					}
				}

				.ny-upload-ul {
					margin: 0;
					display: inline;
					vertical-align: top;

					li {
						overflow: hidden;
						background-color: #fff;
						border: 1px solid #c0ccda;
						border-radius: 6px;
						box-sizing: border-box;
						width: 148px;
						height: 148px;
						margin: 0 8px 8px 0;
						display: inline-block;

						div {
							width: 100%;
							height: 100%;
							display: block;
							unicode-bidi: isolate;
							position: relative;

							img {
								width: 100%;
							}

							.ny-upload-span:hover {
								opacity: 1;
							}

							.ny-upload-span {
								position: absolute;
								width: 100%;
								height: 100%;
								left: 0;
								top: 0;
								cursor: default;
								text-align: center;
								color: #fff;
								opacity: 0;
								font-size: 20px;
								background-color: rgba(0, 0, 0, .5);
								transition: opacity .3s;
								line-height: 148px;

								.ny-upload-span-itam1 {
									cursor: pointer;
									padding: 0 10px;
								}

								.ny-upload-span-itam2 {
									padding: 0 10px;
									cursor: pointer;
								}
							}
						}

					}
				}

				.ny-upload-img {
					display: inline-block;
					background-color: #fbfdff;
					border: 1px dashed #c0ccda;
					border-radius: 6px;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					width: 148px;
					height: 148px;
					cursor: pointer;
					line-height: 146px;
					vertical-align: top;
					position: relative;
					text-align: center;
					color: #8c939d;
					font-size: 26px;
				}

				.ny-upload-img:hover {
					border-color: #409EFF;
					color: #409EFF;
				}
			}

			.btn-box {
				position: absolute;
				width: 20%;
				height: 100px;
				left: 40%;
				bottom: 0;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
		}
	}
</style>